<template>
  <div class='hawkContent'>
    <el-row :gutter='20' style='padding-left: 20px;'>
      <el-col :span='3'>
        <el-input placeholder='请输入菜单名称搜索' v-model='queryForm.query.name'></el-input>
      </el-col>
      <el-col :span='4'>
        <el-button type='hawkSearch' @click='init'>搜索</el-button>
        <el-button plain @click='reSet'>重置</el-button>
      </el-col>
    </el-row>
    
    <div class="buttons">
      <el-button @click="editUser(0,0)" icon="el-icon-plus" type="primary" style="margin-left:20px;">新增</el-button>
    </div>

    <el-table
      :data="tableData"
      style="width: 100%;"
      row-key="menuName"
      border
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column
        prop="menuName"
        label="菜单名称"
        width="180"
        >
      </el-table-column>
      <el-table-column
        prop="icon"
        label="图标"
        width="180">
      </el-table-column>
      <el-table-column
        prop="type"
        label="类型">
      </el-table-column>
      <el-table-column
        prop="routePath"
        label="路由路径">
      </el-table-column>
            <el-table-column
        prop="componentPath"
        label="组件路径">
      </el-table-column>
      <el-table-column
        prop="order"
        label="排序">
      </el-table-column>
      <el-table-column
        prop="permissions"
        label="权限标识">
      </el-table-column>
      <el-table-column
        prop="directory"
        label="上级目录">
      </el-table-column>
      <el-table-column
        prop="editor"
        label="编辑">
        <template slot-scope="scope">
        <span @click='editUser(scope.row,0)'>新增</span>
        <span class='hawk-text-divider'>|</span>
        <span @click='editUser(scope.row,1)'>修改</span>
        <span class='hawk-text-divider'>|</span>
        <span @click='delUser(scope.row)'>删除</span>
        </template>
        
      </el-table-column>
    </el-table>

    <div class='bottom-btns' style="float:right;"> 
      <el-pagination
        background
        @size-change='handleSizeChange'
        @current-change='handleCurrentChange'
        :current-page.sync='queryForm.page.current'
        :page-sizes='[10, 20, 50, 100]'
        :page-size='queryForm.page.size'
        layout=' prev, pager, next,sizes'
        :total='total'>
      </el-pagination>
    </div>
    <el-dialog
      :title='formTitle'
      :visible.sync='addDialogVisible'
      width='50%'
      :close-on-click-modal='false'
      @close='addDialogClosed'
    >
      <!-- 内容主题区 -->
      <el-form
        :model='addForm'
        :rules='addFormRules'
        ref='addFormRef'
        label-width='70px'
      >
        <el-form-item label='菜单名称' prop='menuName'>
          <el-input v-model='addForm.menuName'></el-input>
        </el-form-item>
        <el-form-item label='图标' prop='icon'>
          <el-input v-model='addForm.icon'></el-input>
        </el-form-item>
        <el-form-item label="类型"  prop="type">
          <el-radio-group v-model="addForm.sex">
            <el-radio label="目录类型"></el-radio>
            <el-radio label="页面类型"></el-radio>
            <el-radio label="按钮类型"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label='路由路径' prop='routePath'>
          <el-input v-model='addForm.routePath'></el-input>
        </el-form-item>
        <el-form-item label='组件路径' prop='componentPath'>
          <el-input v-model='addForm.componentPath'></el-input>
        </el-form-item>
        <el-form-item label='排序' prop='order'>
          <el-input v-model='addForm.order'></el-input>
        </el-form-item>
        <el-form-item label='权限标识' prop='permissions'>
          <el-input v-model='addForm.permissions'></el-input>
        </el-form-item>
        <el-form-item label='上级目录' prop='directory'>
          <el-input v-model='addForm.directory'></el-input>
        </el-form-item>
      </el-form>
      <!-- 底部区 -->
      <span slot='footer' class='dialog-footer'>
        <el-button @click='addDialogVisible = false'>取 消</el-button>
        <el-button type='primary' @click='save'>确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getList, doDelete, doAdd, doEdit } from '@/api/user'
import HawkTable from '@/components/table'

export default {
  // HawkTable
  components: {  },
  //import引入的组件需要注入到对象中才能使用",
  data() {
    //这里存放数据",
    var checkEmail = (rule, value, cb) => {
      // 验证邮箱的正则表达式
      const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
      if (regEmail.test(value)) {
        // 合法邮箱
        return cb()
      }
      cb(new Error('请输入合法的邮箱'))
    }
    // 验证手机号的规则
    var checkMobile = (rule, value, cb) => {
      // 验证手机号正则表达式
      const regMobile = /^(0|86|17951)?(13[0-9]|15[0123456789]|17[678]|18[0-9]|14[57])[0-9]{8}$/

      if (regMobile.test(value)) {
        // 合法邮箱
        return cb()
      }

      cb(new Error('请输入合法的手机号'))
    }
    return {
      formTitle: '新增目录',
      addDialogVisible: false,
      multipleSelection: [],
      addForm: {
        menuName:'',
        icon:'',
        type:'',
        routePath:'',
        componentPath:'',
        order:'',
        permissions:'',
        directory:'',
      },
      addFormRules: {
        menuName: [
          { required: true, message: '请输入菜单名称', trigger: 'blur' },
        ],
        icon: [
          { required: true, message: '请输入图标', trigger: 'blur' },
        ],
        type: [
          { required: true, message: '请输入类型', trigger: 'blur' },
        ],
        routePath: [
          { required: true, message: '请输入路由路径', trigger: 'blur' },
        ],
        componentPath: [
          { required: true, message: '请输入组件路径', trigger: 'blur' },
        ],
        order: [
          { required: true, message: '请输入排序', trigger: 'blur' },
        ],
        permissions: [
          { required: true, message: '请输入权限标识', trigger: 'blur' },
        ],
        directory: [
          { required: true, message: '请输入上级目录', trigger: 'blur' },
        ],
      },
      tableData: [{
        menuName:'系统管理',
        icon: 'el-icon-folder-opened',
        type: '目录',
        routePath: '/sys/menu',
        createDate: 2021-10-12,
        order:0,
        permissions:'sys:add',
        directory:'顶级菜单',
        children:[
          {
        menuName: '用户管理',
        icon: 'el-icon-s-custom',
        type: '菜单',
        routePath: '/sys/menu',
        createDate: 2021-10-12,
        order:0,
        permissions:'sys:add',
        directory:'系统管理',
        
        children:[
          {
        menuName: '用户添加',
        icon: 'el-icon-plus',
        type: '按钮',
        routePath: '/sys/menu',
        createDate: 2021-10-12,
        order:0,
        permissions:'sys:add',
        directory:'用户管理',
        hasChildren: true,
        
          }
        ]
          }
        ]
      }],
      total: 0,
      queryForm: {
        query: {
          name:''
        },
        page: {
          current: 1,
          size: 10
        }
      }
    }
  },
  //监听属性 类似于data概念",
  computed: {
    cellStyle() {
      return {
        padding: '8px 0'
      }
    }
  },
  //监控data中的数据变化",
  watch: {},
  //方法集合",
  methods: {
    reSet() {
      this.queryForm = this.$options.data().queryForm
    },
    async init() {
      const { data: res } = await getList(this.queryForm)
      this.tableData = res.data.list
      this.total = res.data.total
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleSizeChange() {
    },
    handleCurrentChange() {
    },
    save() {
      this.$refs.addFormRef.validate(async (valid) => {
        console.log(valid)
        if (!valid) return
        if (this.addForm.id) {
          await doEdit(this.addForm)
        } else {
          await doAdd(this.addForm)
        }
      })

    },
    delUser(row) {
      this.$confirm(`此操作将删除该${row.type}, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(async () => {
        let ret = await doDelete(row.id)
       if (ret.code == 20000) {

            let type = ''
            if (ret.data) {
              ret.message = '删除成功'
              type = 'success'
            } else {
              type = 'error'
            }
            this.$message({
              type: type,
              message: ret.message,
            })

            // console.log(this.multipleSelection.length);
            if (this.multipleSelection.length == this.tableData.length) {
              this.queryForm.page.current = this.queryForm.page.current - 1
              if (this.queryForm.page.current < 1) {
                this.queryForm.page.current = 1
              }
            }

            this.multipleSelection = []
            this.init()
       }

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    editUser(row,type) {
      console.log(row)
      if (type==0) {
        row !== 0 ?  this.formTitle = '新增' + row.type : this.formTitle    
      } else {
          this.formTitle = '修改' + row.type
          this.addForm = Object.assign({}, row)
      }
      this.addDialogVisible = true
    },
    addDialogClosed() {
      this.addForm = this.$options.data().addForm
      this.addDialogVisible = false
      this.$refs.addFormRef.resetFields()
    }
  },
  //生命周期 - 创建之前",数据模型未加载,方法未加载,html模板未加载
  beforeCreate() {

  },

  //生命周期 - 创建完成（可以访问当前this实例）",数据模型已加载，方法已加载,html模板已加载,html模板未渲染
  created() {
    // this.init()

  },

  //生命周期 - 挂载完成（可以访问DOM元素）",html模板已渲染
  mounted() {

  }

}
</script>

<style lang='scss'>
.hawkContent {
  width: calc(100% - 40px);
  min-height: calc(100vh - 140px);
  background: #fff;
  padding: 20px;
  border-radius: 8px;

  .inputLabel {
    font-size: 14px;
    color: #333333;
  }

  .bottom-btns {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    margin-top: 10px;

    &-left {
      display: flex;
      align-items: center;

      &-num {
        margin-right: 10px;
        color: #333333;
        font-size: 14px;
      }
    }
  }
}

</style>
